<!--
 * @Author: adolphus adolphus520@163.com
 * @Date: 2022-12-10 00:18:29
 * @LastEditors: 姚杰鸿
 * @LastEditTime: 2024-11-11 17:01:28
 * @Description: file content
-->
<template>
  <el-container>
    <el-aside width="auto">
      <MdsAside
        :is-collapse="isCollapse"
        :show="show"
        :actpath="actpath"
        @collapse="collapse"
      />
    </el-aside>
    <el-container>
      <el-header>
        <MdsNav :is-collapse="isCollapse" :show="show" @collapse="collapse" />
      </el-header>
      <el-main class="main-content">
        <el-tabs
          v-model="editableTabsValue"
          type="card"
          class="demo-tabs"
          @tab-remove="removeTab"
          @tab-click="clickTab"
        >
          <el-tab-pane
            v-for="item in editableTabs"
            :key="item.name"
            :label="item.title"
            :name="item.name"
            :closable="item.closable"
          >
          </el-tab-pane>
        </el-tabs>
        <slot :tabs="editableTabs"></slot>
      </el-main>
      <el-footer>
        <MdsFooter />
      </el-footer>
    </el-container>
  </el-container>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import type { TabPaneName } from "element-plus";

type tapVal = {
  title: string | "";
  name: string | "";
  content: string | "";
  closable: boolean;
};

const emit = defineEmits(["tabs"]);
const isCollapse = ref(false),
  show = ref(true),
  collapse = () => {
    console.log(1);
    isCollapse.value = !isCollapse.value;
  },
  $route = useRoute(),
  $router = useRouter(),
  actpath = ref(""),
  editableTabsValue = ref(""),
  editableTabs = ref<tapVal[]>([]),
  addTab = (view: any) => {
    const newTabName = view.name;
    editableTabs.value.push(view);
    editableTabsValue.value = newTabName;
  },
  removeTab = (targetName: TabPaneName) => {
    const tabs = editableTabs.value;
    let activeName: string = editableTabsValue.value;
    if (activeName == targetName) {
      tabs.forEach((tab, index) => {
        if (tab.name == targetName) {
          const nextTab = tabs[index + 1] || tabs[index - 1];
          if (nextTab) {
            activeName = nextTab.name;
            $router.push({ path: activeName });
          }
        }
      });
    }
    editableTabsValue.value = activeName;
    editableTabs.value = tabs.filter((tab) => tab.name !== targetName);
    emit("tabs", editableTabs.value);
  },
  clickTab = (pane: any, ev: any) => {
    $router.push({ path: pane.paneName });
  };

onMounted(() => {
  window.onresize = () => {
    if (800 > document.body.clientWidth) {
      show.value = false;
      //isCollapse.value = false;
    } else if (900 > document.body.clientWidth) {
      show.value = true;
      isCollapse.value = true;
    } else if (950 > document.body.clientWidth) {
      isCollapse.value = false;
    }
  };
  let url = window.location.href;
  console.log(url);
});
watch($route, (nV, oV) => {
  actpath.value = nV.path;
  const tabs = editableTabs.value;
  let hv = false;
  tabs.forEach((tab, index) => {
    if (tab.name == nV.path) {
      hv = true;
    }
  });
  editableTabsValue.value = nV.path;
  if (!hv) {
    let closable = true;
    if ("/index.html" == nV.path) {
      closable = false;
    }
    addTab({
      title: nV.name,
      name: nV.path,
      content: nV,
      closable: closable,
    });
  }
});
</script>

<style lang="scss" scoped>
.main-content {
  height: calc(100vh - 140px);
}
</style>
